<template>
  <div class="table_page">
    <slot name="tableHeader">
      <table-header
        v-if="showHeader"
        ref="headerRef"
        :buttonList="buttonList"
        :tableHeaderSize="tableHeaderSize"
        :title="title"
        :showSearch="showSearch"
        :showExport="showExport"
        :searchPlaceholder="searchPlaceholder"
        :tableColumn="tableColumn"
        :exportInfo="exportInfo"
        v-bind="{ ...searchFormConfig }"
        @buttonClick="data => emits('buttonClick', data)"
        @resetPageNum="searchChange"
        @columnChange="columnChange"
      >
        <template #titleTip>
          <slot name="titleTip"></slot>
        </template>
        <template #searchBefore>
          <slot name="searchBefore"></slot>
        </template>
        <template #searchAfter>
          <slot name="searchAfter"></slot>
        </template>
      </table-header>
    </slot>
    <op-table-vir
      ref="tableVirRef"
      :tableData="tableData"
      :tableColumn="tableColumn"
      expandColumnKey="1"
    >
    </op-table-vir>
  </div>
</template>
<script lang="tsx" setup>
import { ref, computed, onMounted } from 'vue';
import { tableDataMock } from './config';
import TableHeader from './components/TableHeader.vue';

const props = defineProps({
  // ======表头组件 table-header
  tableHeaderSize: {
    type: String,
    default: 'small',
  },
  title: {
    type: String,
    default: '',
  },
  showHeader: {
    // 是否展示头部
    type: Boolean,
    default: true,
  },
  searchPlaceholder: {
    type: String,
    default: 'Search',
  },
  searchFormConfig: {
    // 查询条件status，project和date配置
    type: Object,
    default: () => ({}),
  },
  showExport: {
    type: Boolean,
    default: true,
  },
  showSearch: {
    type: Boolean,
    default: true,
  },
  buttonList: {
    // 头部的按钮配置
    type: Array,
    default: () => [],
  },
  tableColumn: {
    type: Array,
    default: () => [],
  },
});
const emits = defineEmits([
  // 表头
  'buttonClick',
  'searchChange',
  'columnChange',
]);

// Ref
const tableVirRef = ref();

// data
const searchParams = ref({});

// 导出
const exportInfo = computed(() => {
  return {
    search: searchParams.value,
    ...props.exportConfig,
  };
});

const tableData = ref([]);

onMounted(() => {
  init();
});

const init = () => {
  tableData.value = [...tableDataMock];
};

// 列字段展示
function columnChange(checkedList) {
  const arr = _.cloneDeep(props.tableList);
  let filterArr = recurison(arr, checkedList);
  if (checkedList.length === 0) {
    filterArr = filterArr.filter(i => {
      return i.label !== 'Action';
    });
  }
  tableShowList.value = filterArr;
  nextTick(() => {
    tableRef.value.initTable();
  });
}

// 查询条件改变
function searchChange(num, data) {
  emits('searchChange', data);
  resetPageNum(num);
}
</script>
<style lang="scss" scoped>
.table_page {
  height: 100%;
  // width: 100vw;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
</style>
